<template>
  <view class="opeartor-name-wrapper">
    <!-- 可修改 -->
    <view class="opeartor-name overflow-ellipsis" :style="{ color: canEditStaff ? '#3072f6' : '#191c27' }" @click.stop="edit">
      {{ staffName || '未指派' }}
    </view>
    <view class="opeartor-name-underline" v-if="canEditStaff"></view>
  </view>
</template>

<script setup>
  const props = defineProps({
    staffName: {
      type: String,
      default: '',
    },
    // 是否可以编辑交还车人
    canEditStaff: Boolean,
  })

  const emits = defineEmits(['edit'])

  const edit = () => {
    if (props.canEditStaff) emits('edit')
  }
</script>

<style lang="less" scoped>
  .overflow-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .opeartor-name-wrapper {
    position: relative;
    max-width: calc(100% - 42rpx);
    .opeartor-name {
      height: 24rpx;
      font-size: 24rpx;
      line-height: 24rpx;
      flex: 1;
    }
    .opeartor-name-underline {
      position: absolute;
      width: calc(100% + 2rpx);
      height: 1rpx;
      background-color: #3072f6;
      bottom: -5rpx;
      left: 0;
    }
  }
</style>
